<template>
	<div class="list" ref="wrapper">
	  <div>
		<!-- 当前城市 -->
		<div class="area">
			<div class="title border-topbottom">当前城市</div>
			<div class="button-list">
				<div class="button-wrapper">
					<div class="button">{{this.currentCity}}</div>
				</div>
			</div>
		</div>
        <!-- 热门城市 -->
		<div class="area">
			<div class="title border-topbottom">热门城市</div>
			<div class="button-list">
				<div class="button-wrapper"
				v-for="item in hot"
				@click="hotBtnClik(item.name)" 
				:key="item.id">
				<div class="button">{{item.name}}</div>
				</div>
			</div>
		</div>
		<!-- 城市名称 -->
		<div class="area"
		     v-for="(item,key) in cities" 
		     :key="key"
		     :ref="key"
		     >
			<div class="title border-topbottom">{{key}}</div>
			<div class="item-list">
				<div class="item border-bottom"
				v-for ="innerItem in item"
				:key="innerItem.id"
				@click="hotBtnClik(innerItem.name)"
				>{{innerItem.name}}</div>
			</div>
		</div>
	</div>		
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapState,mapMutations} from 'vuex'
export default {
	name:'CityLsit',
	mounted(){
		this.scroll = new Bscroll(this.$refs.wrapper)
	},
	props:{
		hot: Array,
		cities: Object,
		leetter: String
	},
	watch:{
		leetter () {
			if (this.leetter) {
				const element = this.$refs[this.leetter][0]
				this.scroll.scrollToElement(element)
			}
		}
	},
	methods:{
		hotBtnClik (city) {
		// this.$store.commit('changeCity',city)
		this.changeCity(city)
		 this.$router.push('/')
		},
		...mapMutations(['changeCity'])
	},
	computed:{
		...mapState({
			currentCity: 'city'
		})
	}
}	

</script>

<style lang="stylus" scoped="">
@import '~styles/varibles.styl'
	.border-topbottom{
	    border-top:1px solid #ccc
	    border-bottom:1px solid #ccc
	}
	.border-bottom{
	    border-bottom:1px solid #ccc
	}
  .list{
    overflow: hidden
    position: absolute
    top: 1.65rem
    left: 0
    right: 0
    bottom: 0
    }
     .title{
      line-height: .54rem
      height:.54rem
      background: #eee
      padding-left: .2rem
      color: #666
      font-size: .26rem
    }
    .button-list{
      overflow: hidden
      padding: .1rem .6rem .1rem .1rem
    }
    .button-wrapper{
     	float: left
        width: 33.33%
     }
   .button{
     	margin: .1rem
          padding: .1rem 0
          text-align: center
          border: .02rem solid #ccc
          border-radius: .06rem
     }
    .item{
     line-height:.76rem
     padding-left:.2rem
    } 
</style>